<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar></view>

		<view class="detail-info" v-if="details.id">
			<view class="info-title">
				<view class="title-top">{{ details.title }}</view>
				<view class="title-btm">
					<text class="btm-name">{{ details.roomName }}</text>
					<text class="btm-time">{{ details.submitDate }}</text>
					<text class="btm-status" :style="'color:' + color">{{ node }}</text>
				</view>
			</view>
			<view class="info-detail" v-if="type == '1'">
				<view>
					根据
					<text class="textUnder">{{ details.issueSource }}</text>
					，
					<text class="textUnder">{{ details.subBackground | replaceHtml() }}</text>
				</view>

				<view class="com-box">
					<text class="textUnder">{{ details.roomName }}</text>
					初步审定同意，并经复审通过，
					<text class="textUnder">{{ details.roomName }}</text>
					拟开展
					<text class="textUnder">{{ details.title }}</text>
					“有事好商量” 议事议事活动，现予以公示。
				</view>

				<view class="com-box">
					公示期：
					<text class="textUnder">{{ details.issPeriod | nullHelp() }}</text>
				</view>

				<view class="com-box">
					<view>
						议事议事室：
						<text class="textUnder">{{ details.roomName }}</text>
					</view>
					<view>
						联系人：
						<text class="textUnder">{{ details.contactName }}</text>
					</view>
					<view>
						联系电话：
						<text class="textUnder">{{ details.phone }}</text>
					</view>
				</view>

				<view class="info-comment" v-if="comment">
					<view class="inr">
						<u-input inputAlign="left" v-model="content" type="text" placeholder="建议..." style="width: 100%;" />
						<u-button class="form-btn" type="primary" size="medium" @click="confirm1('13')">发送</u-button>

						<view class="like" @click="like('13')">
							<u-icon v-if="isLike" size="40" name="thumb-up-fill" color="#D0021B"></u-icon>
							<u-icon v-else size="40" name="thumb-up" color="#999"></u-icon>
							<text class="line" :style="{ color: isLike ? '#D0021B' : '' }">{{ num }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info-detail" v-else-if="type == '2'">
				<view>
					<text class="textUnder">{{ details.roomName }}</text>
					从
					<text class="textUnder">{{ details.issueSource }}</text>
					的渠道，收集
					<text class="textUnder">{{ details.title }}</text>
					的议事议题。在前期组织议前调研基础上，
					<text class="textUnder">{{ details.roomName }}</text>
					于
					<text class="textUnder">{{ details.conTime }}</text>
					在
					<text class="textUnder">{{ details.conPlace }}</text>
					开展
					<text class="textUnder">{{ details.title }}</text>
					“有事好商量” 议事议事活动。
				</view>

				<view class="com-box">
					此次议事议事活动形成议事建议：
					<text class="textUnder">{{ details.conSuggest | replaceHtml() }}</text>
				</view>

				<view class="com-box">
					经审定由
					<text class="textUnder">{{ details.executor }}</text>
					单位于
					<text class="textUnder">{{ details.endTime }}</text>
					前执行完成。
				</view>

				<view class="com-box">
					公示期：
					<text class="textUnder">{{ details.issPeriod | nullHelp() }}</text>
				</view>

				<view class="com-box">
					<view>
						议事议事室：
						<text class="textUnder">{{ details.roomName }}</text>
					</view>
					<view>
						联系人：
						<text class="textUnder">{{ details.contactName }}</text>
					</view>
					<view>
						联系电话：
						<text class="textUnder">{{ details.phone }}</text>
					</view>
				</view>

				<view class="info-comment" v-if="comment">
					<view class="inr">
						<u-input inputAlign="left" v-model="content" type="text" placeholder="建议..." style="width: 100%;" />
						<u-button class="form-btn" type="primary" size="medium" @click="confirm1('19')">发送</u-button>

						<view class="like" @click="like('19')">
							<u-icon v-if="isLike" size="40" name="thumb-up-fill" color="#D0021B"></u-icon>
							<u-icon v-else size="40" name="thumb-up" color="#999"></u-icon>
							<text class="line">{{ num }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info-detail" v-else>
				<view>
					经议前调研后，
					<text class="textUnder">{{ details.roomName }}</text>
					拟于
					<text class="textUnder">{{ details.conTime }}</text>
					在
					<text class="textUnder">{{ details.conPlace }}</text>
					开展
					<text class="textUnder">{{ details.title }}</text>
					“有事好商量” 议事议事活动，现予以公示。
				</view>

				<view class="com-box">
					会议时间：
					<text class="textUnder">{{ details.conTime }}</text>
				</view>

				<view class="com-box">
					<view>
						议事议事室：
						<text class="textUnder">{{ details.roomName }}</text>
					</view>
					<view>
						议事议地点：
						<text class="textUnder">{{ details.roomName }}</text>

						<image class="map-to" @click="mapTo" src="/static/img/mapto.png" mode="widthFix"></image>
					</view>
					<view>
						联系人：
						<text class="textUnder">{{ details.contactName }}</text>
					</view>
					<view>
						联系电话：
						<text class="textUnder">{{ details.phone }}</text>
					</view>
				</view>

				<view class="fiexd-btm" v-if="syncId && nodeStatus != 3"><u-button type="primary" @click="confirm2">我要参加</u-button></view>
			</view>
		</view>
		
		
		<view class="listDzList">
			<view class="listDzListItem" v-for="item of 5">
				<view class="listDzListItemLeft">
					<image src="../../../static/avatar.png" mode=""></image>
				</view>
				<view class="listDzListItemCenter">
					<view class="listDzListItemCenterTop">
						张三
					</view>
					<view class="listDzListItemCenterCenter">
						2022年9月5日15:16:01
					</view>
				</view>
				<view class="listDzListItemRight">
					<image src="../../../static/dmg.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="listDzList">
			<view class="" v-for="item of 5">
				<view class="listDzListItem" >
					<view class="listDzListItemLeft">
						<image src="../../../static/avatar.png" mode=""></image>
					</view>
					<view class="listDzListItemCenter">
						<view class="listDzListItemCenterTop">
							张三
						</view>
						<view class="listDzListItemCenterCenter2">
							
							我感觉这个不好做
						</view>
					</view>
					<view class="listDzListItemRight">
						删除
					</view>
				</view>
				
				<view class="listDzListItemText">
					2022年9月5日15:16:01
				</view>
			</view>
			
		</view>

		<!-- <view class="uploader-add" @click="onTts">
			<image v-if="!play" src="/static/img/icon_76.png" mode="widthFix"></image>
			<image src="/static/img/icon_77.gif" v-else mode="widthFix"></image>
		</view> -->
	</view>
</template>

<script>
import uniParse from '@/components/uni-parse/parse.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniParse
	},
	data() {
		return {
			id: '',
			syncId: '',
			type: '1',
			num: 0,
			color: '',
			node: '',
			nodeStatus: 0,
			statusMap: {
				0: '未开始',
				1: '进行中',
				2: '已结束'
			},
			colorMap: {
				0: '#0099ff',
				1: '#2B5BFF',
				2: '#FF4816',
				3: '#8166F3'
			},
			content: '',
			comment: false,
			details: {},
			isLike: false,
			play: false
		};
	},
	onLoad(option) {},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.phone = this.userInfo.sysUser.phone;
			} else {
				this.$logout();
			}
		},
		loadData() {
			let data = {
				type: this.type,
				infoId: this.id
			};
			this.$request('/xieshangyishi/oncode/details', data, {
				load: true
			}).then(res => {
				if (!res.data) {
					return false;
				}
				// this.detailInfo = res.data;
				this.details = res.data.details;
			});
			let likeData = {
				like: {
					modelInfoId: this.id,
					userId: this.userId,
					modelCode: 'yshsl',
					modelNode: '13'
				}
			};
			if (this.type == '2') {
				likeData.like.modelNode = '19';
			}
			this.$request('/content_like/like/query', likeData, {
				load: true
			}).then(res => {
				if (!res.data) {
					return false;
				}
				// this.detailInfo = res.data;
				this.num = res.data.likeNum;
			});

			let scoreData = {
				modelInfoId: this.id,
				modelCode: 'yshsl',
				modelNode: '13',
				conValue: 'tags'
			};
			if (this.type == '2') {
				scoreData.modelNode = '19';
			}
			if (this.userInfo.userId) {
				scoreData.wauId = this.userId;
			} else {
				scoreData.userId = this.userId;
			}
			let wsRecord = {
				wsRecord: scoreData
			};
			this.$request('/xieshangyishi/wechatScore/getLikeFlag', wsRecord, {
				load: true
			}).then(res => {
				if (!res.data) {
					return false;
				}
				this.isLike = res.data;
			});
		},
		loadDict(type, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then(res => {
				if (!res.data) {
					return false;
				}
				this[value] = res.data[0].dictValue == '1' ? true : false;
			});
		},
		addScore(type, node = '13') {
			let data = {
				modelInfoTitle: this.details.title,
				modelInfoId: this.id,
				modelCode: 'yshsl',
				modelNode: node,
				modelName: '有事好商量',
				clientCode: this.clientCode,
				conValue: type
			};
			if (this.userInfo.userId) {
				data.wauId = this.userId;
			} else {
				data.userId = this.userId;
			}
			let wsRecord = {
				wsRecord: data
			};
			this.$request('/xieshangyishi/wechatScore/add', wsRecord).then(res => {
				console.log(res);
			});
		},
		delScore(type, node = '13') {
			let data = {
				modelInfoTitle: this.details.title,
				modelInfoId: this.id,
				modelCode: 'yshsl',
				modelName: '有事好商量',
				modelNode: node,
				clientCode: this.clientCode,
				conValue: type
			};
			if (this.userInfo.userId) {
				data.wauId = this.userId;
			} else {
				data.userId = this.userId;
			}
			let wsRecord = {
				wsRecord: data
			};
			this.$request('/xieshangyishi/wechatScore/xxLikeScore', wsRecord).then(res => {
				console.log(res);
			});
		},
		like(node) {
			let likeData = {
				type: '1',
				like: {
					modelInfoId: this.id,
					userId: this.userId,
					modelCode: 'yshsl',
					modelNode: node
				}
			};
			if (this.isLike) {
				likeData.type = '2';
			} else {
				likeData.type = '1';
			}
			this.$request('/content_like/like/add', likeData, {
				load: true
			}).then(res => {
				if (this.isLike) {
					this.isLike = false;
					this.$msg('取消点赞');
					this.delScore('tags', node);
					this.num--;
				} else {
					this.isLike = true;
					this.$msg('点赞成功');
					this.addScore('tags', node);
					this.num++;
				}
			});
		},
		confirm1(node) {
			if (!this.content) {
				this.$msg('请输入评论内容');
				return false;
			}
			let data = {
				comment: {
					modelInfoId: this.id,
					userId: this.userId,
					modelCode: 'yshsl',
					modelNode: node,
					phone: this.phone,
					content: this.content
				}
			};
			this.$request('/content_like/comment/add', data, {
				load: true
			}).then(res => {
				this.content = '';
				this.$msg(res.msg);
				this.addScore('suggest', node);
			});
		},
		confirm2() {
			// this.$msg('请牢记会议号，打开“天翼云会议”app参加');
			let op = {
				appId: 'wx70f76b1b77a277bd',
				path: '/pages/mpjoin/mpjoin?scene=' + this.syncId,
				extraData: {
					scene: this.syncId
				},
				envVersion: 'release',
				success: res => {
					console.log(res);
					this.addScore('consultation', '0');
				}
			};
			console.log(op);
			uni.navigateToMiniProgram(op);
		},
		mapTo() {
			if (!this.details.conLngLat || !this.details.conPlace) {
				this.$msg('议事地点不存在');
				return false;
			}
			let LngLat = this.details.conLngLat.split(',');
			if (LngLat) {
				let res = this.$bd09_to_gcj02(LngLat[0], LngLat[1]);
				uni.openLocation({
					name: this.details.conPlace,
					address: this.details.conPlace,
					longitude: res.lng,
					latitude: res.lat,
					success: () => {
						console.log('success');
					}
				});
			}
		},
		onTts() {
			let text = this.infoObj.title;
			text += ',' + this.infoObj.submitName;
			text += ',' + this.$parseTime(this.infoObj.createTime, '{y}-{m}-{d}');
			text += ',' + this.$htmlRegx(this.infoObj.subBackground);
			this.$tts(text, this, 500);
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.map-to {
	display: inline-block;
	vertical-align: middle;
	margin-left: 30rpx;
	padding: 0 10rpx;
	width: 54rpx;
	height: 54rpx;
	border-left: 1rpx solid #e4e4e4;
}

.info-comment {
	height: 114rpx;

	.like {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		padding: 0 20rpx;
		flex-shrink: 0;
		font-weight: bold;
		font-size: 14px;
		line-height: 70rpx;
		border-radius: 70rpx;
		background-color: #ececec;

		.line {
			margin-left: 10rpx;
		}
	}

	.inr {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 11px 30rpx;
		border-top: 1rpx solid #f1f2f3;
		background-color: #fff;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx 0;
}

.listDzList{
	.listDzListItem{
		display: flex;
		align-items: center;
		padding: 20upx;
		border-bottom: 1upx solid #f5f7fa;
		.listDzListItemLeft{
			flex: 1;
			
			padding-left: 15upx;
			image{
				width: 52.5upx;
				height: 52.5upx;
			}
		}
		
		.listDzListItemCenter{
			flex: 7;
			.listDzListItemCenterTop{
				color: #AD8E77;
				font-size: 14px;
			}
			.listDzListItemCenterCenter{
				font-size: 12px;
				color: #999999;
			}
			
			.listDzListItemCenterCenter2{
				color: #333333;
				padding-top: 10upx;
				font-size: 16px;
			}
		}
		
		.listDzListItemRight{
			flex: 1;
			font-size: 14px;
			color: #999999;
			image{
				width: 36upx;
				height: 32upx;
			}
		}

	}
	
	.listDzListItemText{
		padding: 0upx 0 20upx 110upx;
		font-size: 12px;
		color: #999999;
	}
}
</style>
